
@import '../../css/theme.styl'

.public-nav
    width: 100%;
    height:100px;
    top:-1px;

    /*logo区*/
    .logo
        .logo-icon
            display: inline-block;
            width:55px;
            height 55px;
            background $themecolor;
            position relative;
            &:hover::before
                left:55px;
            &:hover::after
                left:0px;   
        .logo-icon::before
            display: inline-block;
            content: "";
            width:55px;
            height 55px;
            position:absolute;
            background url(https://s02.mifile.cn/assets/static/image/mi-logo.png);
            background-size: cover;
            top:0;
            left:0;
            transition:left 0.3s;
        .logo-icon::after
            display: inline-block;
            content: "";
            width:55px;
            height 55px;
            position:absolute;
            background url(http://s02.mifile.cn/assets/static/image/mi-home.png);
            background-size: cover;
            top:0;
            left:-55px;
            transition:left 0.3s;

    /*public-nav-list开始*/
    .public-nav-list
        height 100px;
        line-height: 100px;
        font-size: 0;
        z-index: 999;
        .nav-item
            display:inline-block;
            padding: 0 10px;
            font-size:16px;
            height 100px;
            line-height: 100px;
            &:hover
                color:$themecolor
        .nav-item-all
            display: none;
        .public-nav-content
            font-size: 12px;
            width 100%;
            height 0px;
            overflow hidden;
            position:absolute;
            top: 100px;
            left 0;
            color #757575;
            background #fff;
            transition:height 0.3s;
            .public-nav-content-wrapper
                display:flex;
                justify-content: flex-start;
                align-items: center; 
            &:hover
                color:#fff;
                height 229px;
                border-top:1px solid #e0e0e0;
                border-bottom:1px solid #e0e0e0;
                box-shadow: 0 3px 4px rgba(0,0,0,.18);
            .vertical-line 
                width:0;
                border-right: 1px solid #e0e0e0;
                height: 100px;
                margin-top: -20px;
            .item
                cursor pointer
                padding-top: 30px;
                width:250px;
                background purple;
                background white;
                text-align: center;
                .title
                    margin-top:10px;
                    color:#000;
                    width:100%;
                    height:20px;
                    line-height:20px;
                .price
                    width: 100%;
                    height 20px;
                    line-height: 20px;
                    color $themecolor;
                .img-wrapper
                    margin auto;
                    width:160px;
                    height 110px;
                    img
                        width 100%;
                        height 100%;
        .nav-item-menu:hover ~ .public-nav-content
            display:block; 
            color:#fff;
            height 229px;
            border-top:1px solid #e0e0e0;
            border-bottom:1px solid #e0e0e0;
            box-shadow: 0 3px 4px rgba(0,0,0,.18);
    /*public-nav-list结束*/

    /*nav-search*/
    .nav-search
        width:300px;
        position relative;
        .my-input
            width:250px;
            height 40px;
            &:hover + .search-icon
                    border-top: 1px solid #b0b0b0;
                    border-right: 1px solid #b0b0b0;
                    border-bottom: 1px solid #b0b0b0;
        .my-input:focus + .search-icon
                border-top: 1px solid $themecolor;
                border-right: 1px solid $themecolor;
                border-bottom: 1px solid $themecolor;

        .search-icon
            position:absolute;
            display: inline-block;
            width:42px;
            height:40px;
            line-height:40px;
            text-align: center;
            border-top: 1px solid #e0e0e0;
            border-right: 1px solid #e0e0e0;
            border-bottom: 1px solid #e0e0e0;
            .iconfont
                font-size: 22px;
            &:hover
                color:#fff;
                cursor pointer
                background:$themecolor;